<template>
  <div id="Allocate">
    <!-- 筛选条件 -->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="订单编号">
        <el-input v-model="form.orderNumber" placeholder="请输入订单编号"></el-input>
      </el-form-item>
      <el-form-item label="订单下单时间">
        <el-col :span="11">
          <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="选择日期"            style="width: 100%;"
          ></el-date-picker>
        </el-col>
        <el-col :span="1" class="line" style="text-align: center;">至</el-col>
        <el-col :span="11">
          <el-date-picker
              v-model="form.date2"
              type="date"
              placeholder="选择日期"            style="width: 100%;"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="merchant.shopName" label="商户名称" width="200" align="center">
        <template slot-scope="scope">
          <a href="javascript:void(0)" @click="details(scope.row)">{{scope.row.merchant.shopName}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="storeImage" label="门面图片" width="140" align="center">
        <template slot-scope="scope">
          <el-avatar :size="65" :src="'/img'+scope.row.merchant.shopImg" @error="errorHandler" style="margin: 0 auto">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="merchant.shopType" label="商户类型" width="200" align="center"></el-table-column>
      <el-table-column prop="merchant.detailAddress" label="商户地址" width="350" align="center"></el-table-column>
      <el-table-column prop="orderDetails.length" label="订单数量" width="100" align="center"></el-table-column>
      <el-table-column prop="productCount" label="商品数量" width="100" align="center"></el-table-column>
      <el-table-column prop="totalPrice" label="总金额" width="100" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" v-if="scope.row.pay === undefined||scope.row.pay === null" class="el-icon-document-add" @click="drawUpAnOutboundOrder(scope.row)">生成出库单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"      style="margin-top: 20px; text-align: right;"
    ></el-pagination>
    <el-dialog :visible.sync="dialogVisible" width="50%" title="制定出库单" @close="dialogClose">
      <el-descriptions class="margin-top"  :column="2" size="medium" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            订单编号
          </template>
          {{row.orderNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            下单时间
          </template>
          {{row.createDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            收货人姓名
          </template>
          {{row.merchant.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            收货人电话
          </template>
          {{row.merchant.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            提货人姓名
          </template>
          {{row.consumer.realName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            提货人电话
          </template>
          {{row.consumer.phone}}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="row.orderDetails" border style="width: 100%">
        <el-table-column prop="price" label="商品名称" width="188px" align="center">
          <template slot-scope="scope">
            {{scope.row.product.name}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="150px" align="center"></el-table-column>
        <el-table-column prop="amount" label="数量" width="150px" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" width="150px" align="center">
          <template slot-scope="scope">
            {{scope.row.product.unit}}
          </template>
        </el-table-column>
        <el-table-column prop="subtotal" label="总金额" width="150px" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" >取 消</el-button>
        <el-button v-if="see" type="primary" @click="pay()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>export default {
  name: "AllocateGoods",
  data() {
    return {
      form: {
        orderNumber: "",
        date1: "",
        date2: ""
      },
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      row:{merchant: {name: '', phone: ''}, consumer: {realName: '', phone: ''}, orderDetails: []},
      dialogVisible :false,
      see:true,
    };
  },
  methods: {
    initDataTable(){
      Object.assign(this.form, {"currentPage": this.currentPage, "pageSize": this.pageSize})
      this.$axios.post("/api/orders/getAllocateOrder", this.form).then(({ data }) => {
        this.tableData = data.records;
        this.total = data.total;
        console.log(this.tableData)
      });
    },
    onSubmit() {
      this.initDataTable();
    },
    resetForm() {
      this.form = {
        region: "",
        type: "",
        resource: "",
        desc: "",
        merchantName: "",
        date1: "",
        date2: ""
      };
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initDataTable()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.initDataTable()
    },
    errorHandler() {
      return true;
    },
    dialogClose(){
      this.dialogFormVisible = false;
    },
    drawUpAnOutboundOrder(row){
      this.row = row;
      this.dialogVisible = true;
      this.see = true;
    },
    details(row){
      this.row = row;
      this.dialogVisible = true;
      this.see = false;
    },
    pay(){
      this.$axios.post("/api/pay-details/pay", this.row).then(({ data }) => {
        if (data) {
          this.$notify({
            title: '成功',
            message: "出库单生成成功",
            type: "success"
          });
          this.dialogVisible = false;
          this.initDataTable();
        } else {
          this.$message({
            message: "出库单生成失败",
            type: "error"
          });
       }
      })
    }
  },
  mounted() {
    this.initDataTable();
  }
};
</script>

<style scoped>.demo-form-inline {
  margin-bottom: 20px;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}

.el-table >>> .el-table__header tr th {
  background-color: lightgray;
  color: black;
}
</style>
